<template>
  <div>
    <div class="test backgroundfff marginTop5" v-for="(item, index) in testList" :key="index">
      <div>
        <p>{{index + 1}}.{{item.title}}</p>
        <van-radio-group v-model="item.answerItem" direction="horizontal" @change="onChange(item, index)">
          <van-radio v-for="(itemAnswer, indexAnswer) in item.answerVoList" :key="indexAnswer" :name="itemAnswer.name" :disabled="item.isDisabled">
            <span :class="item.showCorrect ? 'green' : 'red'">
              <div>{{itemAnswer.name}}.{{itemAnswer.content}}</div>
            </span>
          </van-radio>
        </van-radio-group>
      </div>
      <p style="color: red;border-top: 0.0625rem solid #E6E6E6;padding-top: 0.625rem;" v-if="item.showCorrect">{{$t('dashbord.test.answer')}}：{{item.answer}}</p>
    </div>
    <!-- <div style="margin-top: 1.25rem;" class="center">
      <van-button type="info" size="small" round="" @click="prev">上一步</van-button>
    </div> -->
    <div class="test-footer">
      <p>{{$t('dashbord.test.total')}}{{testList.length}}{{$t('dashbord.test.team')}},{{$t('dashbord.test.currentProgress')}}：{{progress}}/{{testList.length}},{{$t('dashbord.test.currentScore')}}：{{correctList.length}},
        <span style="color: #1577FF;">{{score}}{{$t('dashbord.test.qualified')}}</span>
      </p>
    </div>
  </div>
</template>

<script>
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  export default {
    data() {
      return {
        score: 0,
        correctList: [],
        answer: [],
        progress: 0,
        testList: [],
        projectId: localStorage.getItem('projectId')
      }
    },
    methods:{
      // 上一步
      prev() {
        this.$emit('prev', {
          prev: 2
        })
      },
      // 获取题目列表
      getTestList() {
        dashbordAPI.getQuestions().then(res => {
          this.testList = res.questionBanks
          this.score = res.score
        })
      },
      onChange(item, index) {
        this.$set(item, 'isDisabled', true)
        // 错误时正确答案显示
        if (item.answerItem !== item.answer) {
          this.$set(item, 'showCorrect', true)
        } else {
          this.$set(item, 'showCorrect', false)
        }
        // 当前进度
        this.progress = this.testList.filter(item => {
          if (item.answerItem) {
            return item
          }
        }).length
        // 答对的题数
        this.correctList = this.testList.filter(item => {
          return item.showCorrect === false
        })
        if (this.progress === this.testList.length) {
          if (this.correctList.length >= this.score) {
            this.$dialog.alert({
              message: '恭喜你！考试通过',
              confirmButtonText: '进入首页',
            }).then(() => {
              dashbordAPI.testStatus(1, this.projectId)
              this.$router.push({
                path:'/Home'
              })
            });
          } else {
            this.$dialog.confirm({
              title: '温馨提示',
              confirmButtonText: '重新考试',
              cancelButtonText: '学习后再来',
              message: '当前考试不通过，请重新进行考试',
            }).then(() => {
              dashbordAPI.testStatus(0, this.projectId)
              this.testList = []
              this.getTestList()
              this.$emit('testFile')
            }).catch(() => {
              dashbordAPI.testStatus(0, this.projectId)
              this.$router.push({
                path:'/'
              })
            });
          }
        }
      },
    },
    mounted() {
      this.getTestList()
    }
  }
</script>

<style scoped lang="scss">
  .test{
    padding: 0.9375rem;
    .van-radio-group{
      padding: 0 1.25rem;
      .van-radio{
        width: 100%;
        margin-bottom: 0.3125rem;
        margin-right: 1.25rem;
      }
    }
  }
  /deep/ .van-radio__icon--checked + span {
      color: #03bb03;
  }
  .test-footer{
    border-top: 0.0625rem solid #E6E6E6;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.75rem;
    line-height: 2.75rem;
    background-color: #fff;
    color: #333;
    text-align: center;
    p{
      margin: 0;
    }
  }
</style>
